html{
  font-size:50px;
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}
body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	font-family:Microsoft YaHei;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
*{
  box-sizing: border-box;
}
$cf8:#f8f8f8;
$cff:#ffffff;
$cfe:#feb515;
$ce95:#e95334;
$c23:#232323;
$d3d:#d3d4d9;
$c41:#3a3c41;

img{
  max-width: 100%;
}

@function rem($px){
  @return $px / 100 + rem;
}
.cf{
	zoom:1;
	&:before,&:after {content:"";display:table;}
	&:after {clear:both;}
}
.outer {
  width: rem(750);
  margin: 0 auto;min-height: 100vh;
  background: $cff;
  overflow-x: hidden;
  @extend .cf;
}

*{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-overflow-scrolling:touch;
}
input,textarea {
    -webkit-user-select:auto;
}
.outer.brand-container{
  // padding-top: rem(105);
}
ul#collapase-nav-1{
 /* padding-bottom: rem(240);*/
  padding-bottom: 0;
  margin-bottom: 0;
}
.nav-container{
  height: rem(105);
  line-height: rem(105);
  height: 100vh !important;
  overflow: scroll;
  transition: 0.3s;
  position: fixed;
  top: 0;
  left: 100%;
  right: 0;
  z-index: 1100;
  background-color: $cff;
  &.active-bg{
    background-color: #96192E;
    left: 0;

  }
  .top-nav button{
    position: relative;
    top: 0.07rem;
  }
  .nav-box{
    li{
      background-color: #96192E;
      border: none;
      &.am-panel{
        box-shadow: none;
      }
    }

    .am-panel{
      a.nav-item{
        font-size: rem(40);
        line-height: rem(200);
        color: $cff;
        padding: 0 0 0 rem(38);
        position: relative;
         .am-icon-close{
          display: inline-block;
        }
         .am-icon-plus {
          display: none;
        }
        &.am-collapsed{
          .am-icon-close{
            display: none;
          }
          .am-icon-plus {
            display: inline-block;
          }
        }

        i.am-fr.am-margin-right {
          color: #C73D54;
          margin-right: rem(0);
          position: absolute;
          margin-left: rem(0);
          right: rem(45);

        }
      }
      .am-list{
        li a{
          padding: 0 0 0 rem(92);
          font-size: rem(24);
          line-height: rem(100);
          color: $cff;
        }
      }
    }
  }
  .top-nav button span{
    &:nth-child(1) {
      background: $cff;
      transform: rotate(45deg);
    }
    &:nth-child(2) {
      display: none;
    }
    &:nth-child(3) {
      background: $cff;
      transform: rotate(-45deg) translate(rem(7), rem(-7));
    }
  }
}
.top-nav{
  position: relative;
  height: rem(105);
  display: flex;
  align-items: center;
  justify-content: space-between;
  .nav-logo{
    width: rem(113);
    height: rem(60);
    margin-left: rem(37);
  }
  button {
    padding: 0;
    width: rem(38);
    height: rem(22);
    position: absolute;
  /*  top: rem(43);*/
    right: rem(40);
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    z-index: 10;
    span{
      display: block;
      width: rem(38);
      height: rem(2);
      background: #95172C;
      margin-bottom: rem(8);
      transition: 0.5s;
      &.spa1 {
        background: $cff;
        transform: rotate(45deg);
      }
      &.spa3 {
        background: $cff;
        transform: rotate(-45deg) translate(rem(7), rem(-7));
      }
    }
  }
}

div#collapseNav {
  padding: 0 rem(40);
  background-color: #fff;
  .menu-cotent.active{
    box-shadow: 0 1px 0.04rem rgba(150, 150, 150, 0.3);
    -webkit-box-shadow: 0 1px 0.04rem rgba(150, 150, 150, 0.3);
    background: rgba(255,255,255,1);
    z-index: 30;
  }
  nav{
    width: auto;
    .am-nav > li.am-active > a{
      &::after{
        background-color: #96182D;
      }
    }
    .am-nav > li > a{
      border: none;
      line-height: rem(140);
      &::after{
        content: '';
        display: block;
        background-color: #E7E7E7;
        height: rem(4);
        width: rem(160);
      }
    }
  }
}
.minContent{
  min-height: 7.8rem;
  font-size: .3rem;
  line-height: 1.5;
  img{
    height: auto;
  }
    table{
      max-width: 100%;
    }
  strong{
    font-weight: bold;
  }
}
div .am-nav>li>a:focus, .am-nav>li>a:hover{
    background-color: transparent;
}
.collapse-menu .menu-cotent{
  box-shadow: 0 1px 0.04rem rgba(150, 150, 150, 0.3);
  -webkit-box-shadow: 0 1px 0.04rem rgba(150, 150, 150, 0.3);
}
div.collapse-menu nav{
  margin-top: 0;
  padding-bottom: 0;
  ul{
    padding-bottom: 0.1rem;
  }
}
.footer-box{
  .address-box{
    position: relative;
    height: rem(86);
    .info-text{
      padding: rem(24) 0;
      font-size: rem(14);
      line-height: rem(24);
      color: $cff;
    }
    .icon-box{
      position: absolute;
      right: 0;
      top: 0;
      line-height: 100%;

      span{
        font-size: rem(22);
        color:#D8D8D8;
        vertical-align: top;
        &.am-icon-weibo{
          color: #D8D8D8;
        }
        &:hover{
          color: #971B2F;
        }
      }

    }
  }
}

.add-us-form.form-box{
  padding: 0;
  .am-popup-hd .am-popup-title{
    font-size: rem(30);
    color: #971B2F;
    text-align: left;
    font-weight: normal;
  }
  .am-popup-bd{
    padding: rem(40);
    background: $cff;
  }
  .insert-box{
    text-align: center;
    button.sub-btn{
      margin-top: rem(30);
    }
  }
  .wechat-icon{
    width: rem(23);
    height: rem(23);
    background: url('../images/form_wx.png') 0 0 no-repeat;
    background-size: contain;
  }
  .address-icon{
    width: rem(26);
    height: rem(26);
    background: url('../images/form_cs.png') 0 0 no-repeat;
    background-size: contain;
  }
  .like-prod-icon{
    width: rem(26);
    height: rem(25);
    background: url('../images/form_cp.png') 0 0 no-repeat;
    background-size: contain;
  }
  .from-address{
    width: rem(26);
    height: rem(23);
    background: url('../images/form_qd.png') 0 0 no-repeat;
    background-size: contain;
  }
  .jianyi-icon{
    width: rem(26);
    height: rem(23);
    background: url('../images/form_jy.png') 0 0 no-repeat;
    background-size: contain;
  }
  .diff-icon{
    width: rem(26);
    height: rem(23);
    background: url('../images/form_jy.png') 0 0 no-repeat;
    background-size: contain;
  }
    textarea.msg-content {
      font-size: 0.2rem;
      background-color: #f3f3f3;
      border: none;
      padding: 0.17rem 0.17rem 0.17rem 0;
      resize: none;
  }
}
.form-box{
  padding-top: rem(90);
  .form-title{
      position: relative;
      font-size: rem(20);
      color:#404040;
      text-align: center;
      width: rem(500);
      background-color: $cff;
      margin: 0 auto;
      margin-bottom: rem(62);
      &::before{
          content: "";
          display: block;
          width: rem(74);
          height: 1px;
          background-color: #CCCCCC;
          position: absolute;
          left:rem(-90);
          top: 50%;
      }
      &::after{
          content: "";
          display: block;
          width: rem(74);
          height: 1px;
          background-color: #CCCCCC;
          position: absolute;
          right:rem(-90);
          top: 50%;
      }
  }
  .am-form{
      color:#575757;
      font-size: rem(20);
      .am-form-group{
          background:rgba(243,243,243,1);
          box-shadow:0px rem(2) 0px 0px rgba(211,211,211,1);
          border-radius:rem(8);
          margin-bottom: rem(15);
          line-height: rem(78);
          height: rem(78);
          &.msg-box{
              height: auto;
              line-height: normal;
              label{
                  padding-top: rem(17);
              }
          }
      }
      .insert-box{
          padding: 0;
          height: 100%;
      }
      label{
          padding: 0;
          text-align: center;
      }
      input{
          background:rgba(243,243,243,1);
          height: 100%;
          border: none;
          outline: none;
          padding: 0;
          font-size: rem(20);
          &:focus{
              background:rgba(243,243,243,1);
              outline: none;
              box-shadow: none;
          }
      }
      button.sub-btn{
          padding: 0;
          font-size: rem(24);
          line-height: rem(107);
          background-color: #95182D;
          color:#fff;
          width: rem(669);
          border: none;
          outline: none;
          border-radius: rem(8);
          margin:  rem(53) auto;

      }
  }
  textarea.msg-content {
      font-size: rem(20);
      background-color: #f3f3f3;
      border:none;
      padding: rem(17) rem(17) rem(17) 0;
      &:focus{
          background:rgba(243,243,243,1);
          outline: none;
          box-shadow: none;
      }
  }
  label span{
      vertical-align: middle;
      display: inline-block;
  }
  .xm-icon{
      width: rem(23);
      height: rem(23);
      background: url('../images/form-xm.png') 0 0 no-repeat;
      background-size: contain;
  }
  .dh-icon{
      width: rem(16);
      height: rem(24);

      background: url('../images/form-tel.png') 0 0 no-repeat;
      background-size: contain;
  }
  .yx-icon{
      width: rem(26);
      height: rem(20);
      background: url('../images/form-yx.png') 0 0 no-repeat;
      background-size: contain;
  }
  .company-icon{
      width: rem(29);
      height: rem(24);
      background: url('../images/form-company.png') 0 0 no-repeat;
      background-size: contain;
  }
  .ly-icon{
      width: rem(26);
      height: rem(21);
      background: url('../images/form-ly.png') 0 0 no-repeat;
      background-size: contain;
  }
}
